<template>
  <div>
    <el-container class="main-box">
      <el-header>
        <div class="head">
          <div class="head-left">
            <div v-show="name_list.length" class="f-s-20">
              <span>关于</span>
              <span class="f-w-700">{{ name_list.join('与') }}</span>
              <span>的对比</span>
            </div>
            <div class="compared cursor-p" @click="handleCompared">
              <span>更多人员对比 ></span>
            </div>
            <div class="form-content">
              <div>
                <el-checkbox v-for="(item, index) in form_type" :key="index"
                             v-model="item.is_checked"
                             @change="handleChangeType(index)"
                >{{ item.text }}</el-checkbox>
              </div>
            </div>
          </div>
          <div class="head-right">
            <!--                      时间选择器-->
            <div class="time-select-box">

              <el-popover
                placement="bottom"
                width="260"
                v-model="visible"
                trigger="click"
              >
                <div class="p-4-0-11-0">
                  <el-tree
                    class="time-tree"
                    ref="timeTree"
                    :data="time_tree_copy"
                    show-checkbox
                    node-key="id"
                    empty-text="请选择时间类型"
                    check-strictly
                    expand-on-click-node
                    highlight-current
                    :default-expanded-keys="left_open_list"
                    :default-checked-keys="yearList"
                    @node-expand="nodeExpand"
                    @node-collapse="nodeCollapse"
                    @check-change="leftTreeChange"
                    />
                  <div class="inquire f-s-16" @click="handleInquire">查询</div>
                </div>
                <div slot="reference" class="text-font" style="cursor: pointer;">
                  <div class="time-select-head">更多计划</div>
                </div>
              </el-popover>
            </div>
            <button class="btn-switch cursor-p"
                    @click="handleChange">
              <svg-icon class="f-s-16"
                        style="color: #FFFFFF" :icon-class="is_switchover === 0?'appraiseheng':'appraisezong'"/>
              {{ is_switchover === 0 ? '纵向布局' : '横向布局' }}
            </button>
            <button class="btn-unified cursor-p" @click="handleExport">
              <svg-icon class="f-s-16"
                        style="color: #1966E2" icon-class="appraiseout"/>
              导出
            </button>
            <button class="btn-unified cursor-p" v-if="false">
              <img src="@/assets/appraise/icon/contrast_dayin.png" alt="">
              打印
            </button>
          </div>
        </div>
      </el-header>
      <el-main ref="Box">
        <div class="content my-duty">
          <compared-plan-table-across v-if="compared_list.length && is_change_table === 0"
                                      :compared_type="compared_type"
                                      :compared_list="compared_list"/>
          <compared-plan-table-endlong v-if="compared_list.length && is_change_table === 1"
                                       :compared_type="compared_type"
                                       :compared_list="compared_list"/>
          <div class="kong-state" v-show="!compared_list.length">
            <div class="flex f-dir align-center kong-box">
              <img class="kong" src="@/assets/appraise/icon/kongzhuangtai.png" alt=""/>
              <div class="kong-text">选择后再查看内容哦~</div>
            </div>
          </div>
        </div>
        <!--  穿梭框  -->
        <!--        <shuttle-box :isShow="isShow" @shut="shut"-->
        <!--                     :personnel_list="personnel_list"-->
        <!--                     @allShuttleBox="allShuttleBox"-->
        <!--        />-->

        <Transfer v-model="transferShow" :compareIds="compare_id" :personList="personnel_list" @allShuttleBox="allShuttleBox" />

      </el-main>
    </el-container>
  </div>
</template>
<script>
import PeopleAcross from '@/appraise/components/PeopleAcross'
import ComparedPlanTableEndlong from '@/appraise/components/comparedPlanTableEndlong'
import ComparedPlanTableAcross from '@/appraise/components/comparedPlanTableAcross'
import DepartmentEndlong from '@/appraise/components/DepartmentEndlong'
import ShuttleBox from '@/appraise/components/ShuttleBox'

import Transfer from '@/appraise/components/Transfer'

import {fileDownload, syncRequest} from '@/utils/httpRequet'

export default {
  components: {
    PeopleAcross,
    ComparedPlanTableEndlong,
    ComparedPlanTableAcross,
    DepartmentEndlong,

    ShuttleBox,

    Transfer
  },
  data() {
    return {
      transferShow: false,
      // printContent: { //打印
      //   id: "print",  //打印标签的id
      //   popTitle: 'Document',  //文件标题
      //   extraCss: 'https://www.google.com,https://www.google.com',
      //   extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      // },
      type: 0,
      form_type: [
        {text:'周计划',type:'3',is_checked:false},
        {text:'月计划',type:'2',is_checked:false},
        {text:'年计划',type:'1',is_checked:true}
      ],
      visible: false,
      form_type_index: 2,
      planClass: '1', //计划类型
      currentNodeKey: '',
      hide_position: 30,
      compare_id: [],
      name_list: [],//对比人或部门
      is_switchover: 0,
      is_change_table: 2,
      compared_list: [], //对比列表
      compared_type: 2, //对比类型
      time_tree_copy: [],
      time_tree: [],
      left_pitch: [], // 选中节点
      left_open_list: [], // tree默认展开
      yearList: [], // tree默认显示
      isShow: false,
      personnel_list: [],//人员穿梭框数据
      is_loading: false,
    }
  },
  mounted() {
    const this_year = new Date().getFullYear()
    this.yearList.push(String(this_year))
    this.compare_id = this.$store.state.appraise.compared
    this.compared_type = this.$store.state.appraise.type
    this.type = this.compared_type
    this.$store.commit('appraise/DELETE_ID')
    this.compared_type === 0 ? this.initUser(this.yearList) : this.initDept(this.yearList)
    const time_tree_copy = syncRequest({
      url: 'pubGetWeekTree',
    })
    if(time_tree_copy.errorCode === '1') {
      this.time_tree = time_tree_copy.data
      this.time_tree_copy = JSON.parse(JSON.stringify(this.time_tree))
      this.time_tree_copy.forEach(item=>{
        delete item.children
      })
      this.initPropsList(this.time_tree_copy, this.planClass);
    }
  },
  destroyed() {
    sessionStorage.removeItem("ShuttleBoxData");
  },
  methods: {
    //初始加载人员
    initUser(year) {
      const res = syncRequest({
        url: 'planUserComparePlan',
        method: 'POST',
        data: {
          userIdList: this.compare_id,
          planClass: this.planClass,
          timeStr: year,
        }
      })
      if (res.errorCode == '1') {
        this.is_change_table = 2
        this.name_list = []
        this.compared_list = res.data
        this.compared_list[0].forEach(res => {
          this.name_list.push(res.userName)
        })
        setTimeout(()=> {
          this.is_change_table = this.is_switchover
        },200)
      }
    },
    //初始加载部门
    initDept(year) {
      const res = syncRequest({
        url: "planDeptComparePlan",
        method: "POST",
        data: {
          deptIdList: this.compare_id,
          planClass: this.planClass,
          timeStr: year,
        },
      });
      if (res.errorCode == "1") {
        this.is_change_table = 2
        this.name_list = []
        this.compared_list = res.data
        console.log(this.compared_list)
        this.compared_list[0].forEach(res => {
          this.name_list.push(res.deptName)
        })
        setTimeout(()=> {
          this.is_change_table = this.is_switchover
        },200)
      }
    },
    //选中左侧
    leftTreeChange() {
      let arr = this.$refs.timeTree.getCheckedNodes();
      this.left_pitch = arr;
      this.yearList = [];
      for (let i = 0; i < arr.length; i++) {
        if (this.yearList.indexOf(arr[i].id) == -1) {
          this.yearList.push(arr[i].id);
        } else {
          this.yearList.splice(this.yearList.indexOf(arr[i].id), 1);
        }
      }
    },
    // 通过判断start的type，将list中和start的type不同设置禁用状态
    /** start
     *
     * @param list 数据数组
     * @param start 1：年；2：月；3：周
     *
     * */
    initPropsList(list, start) {
      if (list instanceof Array) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].type != start) {
            list[i].disabled = true;
          }
          if (list[i].children instanceof Array) {
            this.initPropsList(list[i].children, start);
          }
        }
      }
    },
    // 节点被展开触发，将展开的数据存储，用来设置默认展示
    nodeExpand(obj) {
      if (this.left_open_list.indexOf(obj.id) == -1) {
        this.left_open_list.push(obj.id);
      }
    },
    // 节点关闭触发，将默认显示的该数据删除
    nodeCollapse(obj) {
      this.left_open_list.splice(this.left_open_list.indexOf(obj.id), 1);
    },
    /**
     *@name 选择类型
     */
    handleChangeType(index) {
      this.yearList = []
      if(this.form_type_index == index) {
        this.form_type[index].is_checked = false
        this.form_type_index = -1
        this.planClass = ''
        this.time_tree_copy = []
        this.$message.warning({message:'请重新选择时间类型', center: true})
        return
      }
      this.form_type.forEach(res=> {
        res.is_checked = false
      })
      this.form_type[index].is_checked = true
      this.form_type_index = index
      this.planClass = this.form_type[index].type
      this.time_tree_copy = JSON.parse(JSON.stringify(this.time_tree))
      switch (this.planClass) {
        case '1':
          this.time_tree_copy.forEach(item=>{
            delete item.children
          })
          this.$message.warning({message:'请选择年份', center: true})
          this.initPropsList(this.time_tree_copy, this.planClass);
          break;
        case '2':
          this.time_tree_copy.forEach(item=>{
            item.children.forEach(item_item=>{
              delete item_item.children
            })
          })
          this.$message.warning({message:'请选择月份', center: true})
          this.initPropsList(this.time_tree_copy, this.planClass);
          break;
        case '3':
          this.$message.warning({message:'请选择周', center: true})
          this.initPropsList(this.time_tree_copy, this.planClass);
          break;
      }
    },
    /**
     * @name 打开穿梭框
     */
    handleCompared() {
      // this.isShow = true

      this.transferShow = true

      const res = syncRequest({
        url: 'pubGetDeptUserTree',
      })
      if (res.errorCode == '1') {
        this.personnel_list = res.data //[0].children
      }
    },
    //关闭弹窗
    shut(vla) {
      this.isShow = vla
    },
    //穿梭框子组件向父组件传参
    allShuttleBox(val) {
      console.log( 'val --' , val)
      this.type = val[0].type
      this.compare_id = []
      val.forEach(res => this.compare_id.push(res.id))
      this.compared_type = this.type === '2' ? 0 : 1
      if(!this.planClass || !this.yearList.length) {
        this.$message.warning({message:'请选择时间类型和对应的时间', center: true})
      }else{
        this.type === '2' ? this.initUser(this.yearList) : this.initDept(this.yearList)
      }
    },
    //查询对比信息
    handleInquire() {
      if(!this.planClass) {
        this.$message.warning({message:'请选择时间类型', center: true})
        return
      }
      if(!this.yearList.length) {
        this.$message.warning({message:'请选择时间', center: true})
        return
      }
      this.visible = false
      this.type == '1' ? this.initDept(this.yearList) : this.initUser(this.yearList)
    },
    /**
     * @name 改变布局
     */
    handleChange() {
      this.is_switchover = this.is_switchover === 0 ? 1 : 0
      this.is_change_table = this.is_switchover
    },
    /**
     * @name 导出
     */
    handleExport() {
      if (!this.is_loading) {
        this.is_loading = true
        if (this.type === 0) {
          fileDownload("planUserExpComparePlan", {
            param: {
              userIdList: this.compare_id,
              planClass: this.planClass,
              direction: this.is_switchover === 0 ? 'transverse' : 'portrait',
              timeStr: this.yearList
            }
          })
        } else {
          fileDownload("planDeptExpComparePlan", {
            param: {
              deptIdList: this.compare_id,
              planClass: this.planClass,
              direction: this.is_switchover === 0 ? 'transverse' : 'portrait',
              timeStr: this.yearList
            }
          })
        }
        setTimeout(() => {
          this.is_loading = false
        }, 2000)
      }
    },
  }
}
</script>

<style scoped>
.el-main {
  background-color: #F0F0F3;
  color: #333;
}

.el-header {
  height: auto !important;
  background-color: #F0F0F3;
  color: #333;
  margin-right: 10px;
  padding-bottom: 10px !important;
}

.main-box {
  width: 100%;
  user-select: none;
  padding: 10px 0 10px 10px;
  font-family: "Microsoft Yahei";
  background-color: #F0F0F3;
}
::v-deep .el-checkbox {
  margin-right: 22px;
}
::v-deep .el-checkbox__label {
  font-size: 16px;
}
.cursor-p {
  cursor: pointer;
}

.f-s-20 {
  font-size: 20px;
}

.f-s-16 {
  font-size: 16px;
}

.f-w-700 {
  font-weight: 700;
}

.cursor-p {
  cursor: pointer;
}

.flex {
  display: flex;
}

.f-dir {
  flex-direction: column;
}

.align-center {
  align-items: center;
}

.my-duty {
  margin-right: 10px;
  border-radius: 4px;
}
.form-content {
  margin-left: 22px;
  display: flex;
  align-items: center;
  position: relative;
}
::v-deep .user-tag {
  color: #fff;
  background-color: #07f;
  padding: 2px .4em;
  border-radius: 999em;
}

::v-deep .el-select {
  height: 36px;
}

::v-deep .el-input__inner {
  height: 36px !important;
}

::v-deep .el-select__tags {
  max-width: 140px !important;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
::v-deep .user-tag {
  color: #fff;
  background-color: #07f;
  padding: 0 5px;
  border-radius: 999em;
  display: inline-block;
  user-select: all;
}
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.head-left {
  display: flex;
  align-items: center;
}

.compared {
  font-family: PingFangSC;
  margin-left: 41px;
  font-size: 16px;
  color: #1C65E3;
}

.head-right {
  display: flex;
  align-items: center;
}

.head-right > button > img {
  width: 15px;
  height: 15px;
}

.head-right > button {
  margin-left: 15px;
  font-size: 16px;
}

.head-right > p:nth-child(1) {
  margin-right: 5px;
}

.head-right > p:nth-child(3) {
  margin-left: 5px;
}

.time-select-box {
  display: flex;
  align-items: center;
  position: relative;
  right: 4.5rem;
}

.btn-switch {
  width: 100px;
  height: 35px;
  opacity: 1;
  background: #1a66e2;
  border-radius: 6px;
  color: #fff;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.btn-unified {
  width: 75px;
  height: 35px;
  background: #ffffff;
  border: 1px solid #1c66e2;
  border-radius: 7px;
  color: #1c66e2;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.content {
  height: calc(100vh - 186px);
  background-color: #FFFFFF;
}

/*空状态样式*/
.kong-state {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kong {
  width: 190px;
  height: 190px;
  margin-bottom: 30px;
}

.kong-box {
  position: relative;
  top: 19px;
}

.kong-text {
  font-size: 18px;
  color: rgba(153, 153, 153, 1);
}
.text-font {
  font-size: 16px;
  color: #1890ff;
  display: flex;
}
.time-tree {
  max-height: 380px;
  overflow-y: auto;
}
::v-deep .el-tree-node__content > label.el-checkbox {
  margin-left: 14px;
}
.inquire {
  color: #1890ff;
  background-color: #e8f4ff;
  border: 1px solid #a3d3ff;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .el-tree-node__label {
  font-size: 16px;
}
@media (max-width: 1024px) {
  .text-font {
    font-size: 14px;
    color: #1890ff;
    display: flex;
  }
  ::v-deep .el-tree-node__label {
    font-size: 14px;
  }
  .f-s-20 {
    font-size: 18px;
  }

  .f-s-16 {
    font-size: 14px;
  }

  .compared {
    font-family: PingFangSC;
    margin-left: 41px;
    font-size: 14px;
    color: #1C65E3;
  }
  ::v-deep .el-checkbox__label {
    font-size: 14px;
  }
  .head-right > button {
    margin-left: 15px;
    font-size: 14px;
  }

  .kong-text {
    font-size: 16px;
    color: rgba(153, 153, 153, 1);
  }
}
</style>
